<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>test</title>
</head>
<body>
    <div id="test"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    
    <script type="text/javascript" src="../js/react-dom.development.js"></script>

    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        class Count extends React.Component{

            constructor(props) {
                console.log("constructor")
                super(props)
                this.state = {count:1}
            }

            componentDidMount() {
                console.log("mount")
            }
            componentWillUnmount() {
                console.log("unmount")
            }
            componentWillMount() {
                console.log("will mount")
            }
            shouldComponentUpdate() {
                console.log("shouldComponentUpdate");
                return true;
            }
            componentWillUpdate() {
                console.log("componentWillUpdate");
            }
            componentDidUpdate() {
                console.log("componentDidUpdate");
            }
            add = () => {
                let {count} = this.state
                this.setState({count:count+1})
            }
            death = () => {
                ReactDOM.unmountComponentAtNode(document.getElementById("test"))
            }
            render() {
                console.log("render")
                const {count} = this.state
                return (
                    <div>
                        <h2>sum is {this.state.count}</h2>
                        <button onClick={this.add}>no life</button>
                        <button onClick={this.death}>unmount</button>
                    </div>
                )
            }
        }
        ReactDOM.render(<Count/>, document.getElementById("test"))
    </script>

</body>
</html>